.popup-design-tip{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  z-index: 2;
  background: rgba(0,0,0,0.4);
}
.popup-mask{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  filter: blur(6px);
}
.popup-background{
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex !important;
  background-color: transparent;
  .uicontainer[data-type="Page"]{
    min-height: inherit;
  }
}
.ui {
  user-select: none;
}
.pointer-event-none{
  pointer-events: none;
}
.ui-hover{
  outline: 1px solid $primary !important;
  box-shadow: 0 0 0 0.2rem #268fff80;
  position: fixed;
  pointer-events: none;
  z-index: 1;
 }
.ui-rect{
  top:0px;left:0px;z-index:1;
}
.ui-action{
  display:flex;top:0px;left:0px;font-size:12px;gap:10px;z-index:3;
  align-items: center;
  border: 2px solid #97c8fb;
  border-top-width: 1px !important;
  position: fixed;
  background-color: #fff;
  padding: 0px 5px;
  color: #444;
}
.ui-selected{
  outline: 2px solid $primary !important;
  box-shadow: 0 0 0 0.2rem #268fff80;
  position: fixed;
  pointer-events: none;
  z-index: 1;
}
.ui-highlight{
  background-color: rgba(255,0,0,0.28);
  position: fixed;
  pointer-events: none;
  z-index: 1;
}
/*非容器下面的所有子元素都不可被选中*/
.ui:not(.uicontainer) {
  // input,select,label,textarea,.btn,.list-group-item, a
  *:not([contenteditable=true]):not(.pointer-event-all){
    pointer-events: none;
  }
}
.uicontainer{
  width: auto;
}
.uicontainer:empty{
  border: 2px dashed $gray-600;
}
.uicontainer:empty:before{
  content: '拖动组件到这里';
  color: $gray-600;
}
.uicontainer:empty{
  min-height: 100px;
}
.uicontainer[data-type="Page"]:empty{
  height: auto;
}

.dragenter-subcontainer, .dragenter-subcontainer>div{
  background-color: #ffb600 !important;
}
.ui.dragover-ui{
  outline: 2px solid #4ad06a;
}
.opacity-50{
  opacity: 0.5;
}
.hidden-preview{
  opacity: 0.25;
}
#ui-events{
  position: fixed;
  background-color: #f1f1f169;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.ui-events-badge{
  background-color: rgba(255,0,0,0.28);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-group{
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: .25rem;
}
.w-50{
  width: 50%!important;
}
.list-group-item.disabled, .list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}
.list-group-item {
  position: relative;
  display: block;
  padding: .5rem 1rem;
  color: #212529;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.125);
}

.list-group-item+.list-group-item {
  border-top-width: 0;
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item-action:focus, .list-group-item-action:hover {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}
.list-group-item-action {
  color: #495057;
  text-align: inherit;
}
.table-toolbar{
  position:fixed;z-index:9;left:0px;top:0px;
  display: flex;
  align-items: stretch;
}
.table-toolbar-column{
  display: flex;
  flex-grow: 1;
  align-self: stretch;
  justify-items: center;
  justify-content: center;

  .split-tool-x{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d6efd;
    width: 5px;
    font-size: 2rem;
    cursor: col-resize;
    color: #0d6efd;
  }
}
.table-toolbar-row{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-items: center;
  justify-content: center;
  .split-tool-y{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d6efd;
    height: 5px;
    font-size: 2rem;
    cursor: row-resize;
    color: #0d6efd;
  }
}
.table-toolbar-td{
  display: flex;
  flex-grow: 1;
  justify-items: center;
  justify-content: center;
  .tool{
    display: flex;
    align-items: center;
    font-size: 2rem !important;
    justify-content: center;
    border-radius: 2px;
    background-color: #fff;
    padding: 0px 2px;
    color: #0d6efd;
    .iconfont:hover{
      color: #0445a4;
    }
  }
}
